<template>
	<view class="container">
		<u-tabs-swiper :list="tabslist" gutter="259" active-color="rgba(255, 158, 93, 1)"  :bold="false" ref="publishtabs" :current="tabcurrent"></u-tabs-swiper>
		<swiper :current="tabcurrent" @transition="transition" @animationfinish="animationfinish" :style="{height:scrollviewHeight+'rpx',backgroundColor:'#fff',marginTop:'17rpx'}">
			<swiper-item v-for="(tab,tabindex) in tabslist" :key="tab.name">
				<!-- 发布名片 -->
				<scroll-view scroll-y="true" :style="{height:scrollviewHeight+'rpx',width:'100%'}" v-if="tabindex==0">
					<!-- 展示已发布的名片 -->
					<view class="carditem" v-for="(carditem,cardindex) in cardlist" :key="cardindex" :class="{'lasttrend':cardindex==cardlist.length-1}" v-on:click="navigateEditcard()">
						<view class="cardinfo">
							<image src="/static/avatar.jpg" mode=""></image>
							<view class="cardinfo-right">
								<view class="cardinfo-top">
									<text class="cardinfo-item">姓名：{{carditem.name}}</text>
									<view class="deposittag">
										<text>保证金{{carditem.deposit}}元</text>
									</view>
								</view>
								<text class="cardinfo-item">分类：{{carditem.fenlei}}</text>
								<text class="cardinfo-item">擅长：{{carditem.shan}}</text>
								<text class="cardinfo-item">货车：{{carditem.havecar?'有':'无'}}</text>
							</view>
						</view>
						<view class="edidcard">
							<u-icon name="edit-pen" size="30"></u-icon>
							<text>编辑</text>
						</view>
					</view>
				</scroll-view>
				<!-- 发布圈子 -->
				<scroll-view scroll-y="true" :style="{height:scrollviewHeight+'rpx',width:'100%'}" v-else>
					<!-- 展示已发布的圈子 -->
					<view class="ringitem" v-for="(ringitem,ringindex) in trendstexts" :key="ringindex" :class="{'lasttrend':ringindex==trendstexts.length-1}">
						<view class="ring-user-del">
							<view class="ring-user">
								<u-avatar src="/static/avatar.jpg"></u-avatar>
								<text>李海</text>
							</view>
							<u-icon name="/static/shenglue.png" size="35" v-on:click="openCloseDeltrendbtn(ringindex)"></u-icon>
						</view>
						<view class="deltrend" v-show="showDeltrendbtn[ringindex]">
							<view class="deltrend-qipao">
								<text>删除</text>
							</view>
						</view>
						<view class="trendstext">
							<text>{{showtrendsText(ringindex)}}</text>
							<text class="showall" v-on:click="showAlltexts(ringindex)" v-if="!isShowall[ringindex]">展开</text>
						</view>
						<view class="trendsimages" :class="{'oneimg':ringitem.images.length==1,'twoimg':ringitem.images.length==2,'moreimg':ringitem.images.length>2}">
							<image :src="trendsimage" v-for="(trendsimage,imagesindex) in ringitem.images" :key="imagesindex"v-on:click="previewImages(ringindex,imagesindex)"></image>
						</view>
						<view class="trendsbtns">
							<view class="btnitem firstbtn">
								<u-icon name="heart" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
								<text>87</text>
							</view>
							<view class="btnitem" v-on:click="openTrendscommitsList()">
								<u-icon name="chat" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
								<text>125</text>
							</view>
							<view class="btnitem" v-on:click="shareThistrends(ringindex)">
								<u-icon name="zhuanfa" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
								<text>分享</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="publish" v-on:click="navigateToPublish()">
			<view class="publish-btn">
				<u-icon name="plus" color="#fff" size="28"></u-icon>
				<text>发布</text>
			</view>
		</view>
		<!-- 圈子动态评论列表 弹出层 -->
		<u-popup v-model="showTrendscommitsList" mode="bottom" border-radius="20" :closeable="true" height="auto" close-icon-pos="top-left">
			<text class="commitslist-title">全部评论23条</text>
			<view class="commitslist">
				<scroll-view scroll-y="true" :style="{height:800+'upx',width:'100%',paddingBottom:'20upx'}">
					<view class="commititem" v-for="commititem in 2">
						<!-- 评论信息 -->
						<view class="commitinfo">
							<u-avatar src="/static/avatar.jpg" size="100"></u-avatar>
							<view class="commits">
								<view class="commit-user-dz">
									<text class="commit-user">李三</text>
									<view class="commitdz">
										<text>99+</text>
										<u-icon name="heart" size="30"></u-icon>
									</view>
								</view>
								<view style="width: 100%;">
									<text class="commit-time">2020-09-04</text>
									<text class="commit-text">请问这是哪家的装修设计啊，厉害风格！请问这是哪家的装修设计啊，厉害风格！</text>
								</view>
								<!-- 评论回复 -->
								<view class="replys" v-for="replyitem in 2">
									<u-avatar src="/static/avatar.jpg"  size="70"></u-avatar>
									<view class="replayinfo">
										<view class="replys-user-dz">
											<text class="commit-user">李三</text>
											<view class="commitdz">
												<text>99+</text>
												<u-icon name="heart" size="30"></u-icon>
											</view>
										</view>
										<view style="width: 100%;">
											<text class="commit-time">2020-09-04</text>
											<text class="commit-text">请问这是哪家的装修设计啊，厉害风格！请问这是哪家的装修设计啊，厉害风格！</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="sendcommits">
				<textarea placeholder="我来说两句" maxlength="-1"/>
				<view class="sendbtn">
					<text>发送</text>
				</view>
			</view>
		</u-popup>
		<!-- 动态分享 弹出层 -->
		<u-popup v-model="showSharemodal" border-radius="20" mode="bottom">
			<view class="shareprovides">
				<view class="provideitem" v-for="provideitem in shareProvides" :key="provideitem.provide">
					<view class="provideicon">
						<image :src="provideitem.icon" mode=""></image>
					</view>
					<text>{{provideitem.name}}</text>
				</view>
			</view>
			<view class="cancelshare" v-on:click="closeSharemodal()">
				<text>取消</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabslist:[{
					name:'发布名片'
				},{
					name:'发布圈子'
				}],
				tabcurrent:0,
				scrollviewHeight:0,
				//模拟数据 动态文本
				trendstexts:[
					{
						text:'新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。',
						images:['/static/=0.jpg']
					},
					{
						text:'新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。',
						images:['/static/=0.jpg','/static/=0.jpg']
					},
					{
						text:'新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。',
						images:['/static/=0.jpg','/static/=0.jpg','/static/=0.jpg']
					}
				],
				showDeltrendbtn:[false,false,false],
				isShowall:[false,false],
				showTrendscommitsList:false,
				showSharemodal:false,
				shareProvides:[{
					provide:'weixin',
					icon:'/static/weixin.png',
					name:'微信好友'
				},{
					provide:'friendsring',
					icon:'/static/friendring.png',
					name:'朋友圈'
				},{
					provide:'qq',
					icon:'/static/qq.png',
					name:'QQ'
				},{
					provide:'weibo',
					icon:'/static/weibo.png',
					name:'新浪微博'
				}],
				//模拟数据 名片列表
				cardlist:[{
					deposit:1000,
					cardimg:'/static/avatar.jpg',
					name:'徐州岳云鹏',
					fenlei:'硬装类',
					shan:'砸墙、防水、水电',
					havecar:true
				},{
					deposit:500,
					cardimg:'/static/avatar.jpg',
					name:'工地彭于晏',
					fenlei:'硬装类',
					shan:'砸墙、防水、水电',
					havecar:true
				}]
			}
		},
		onLoad() {
			const windowHeight=uni.getSystemInfoSync().windowHeight;
			this.scrollviewHeight=windowHeight/(uni.upx2px(windowHeight)/windowHeight)-281;
		},
		methods: {
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.publishtabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.publishtabs.setFinishCurrent(current);
				this.tabcurrent = current;
			},
			openCloseDeltrendbtn(trendindex){
				this.$set(this.showDeltrendbtn,trendindex,!this.showDeltrendbtn[trendindex]);
			},
			//展开动态文本
			showAlltexts(index){
			      this.$set(this.isShowall,index,true);
			},
			//预览图片
			previewImages(trendsindex,imagesindex){
				const that=this;
				console.log(trendsindex,imagesindex)
				uni.previewImage({
					current:imagesindex,
					urls:that.trendstexts[trendsindex].images,
					indicator:"default"
				})
			},
			//打开动态评论列表弹出层
			openTrendscommitsList(){
				this.showTrendscommitsList=true;
			},
			//打开分享弹框
			shareThistrends(){
				this.showSharemodal=true;
			},
			closeSharemodal(){
				this.showSharemodal=false;
			},
			navigateEditcard(){
				uni.navigateTo({
					url:'../publishcard/publishcard?flag=edit'
				})
			},
			navigateToPublish(){
				switch(this.tabcurrent)
				{
					case 0:
					   uni.navigateTo({
					   	   url:'../publishcard/publishcard?flag=publish'
					   });
					   break;
					default:
					   break;
				}
			}
		},
		computed:{
			showtrendsText(){
				// const that=this;
				 return (index)=>{
					 if(this.isShowall[index] || this.trendstexts[index].text.length<=80)
					 {
						 // this.$set(this.isShowall,index,true);
						 const isShowall=this.isShowall;
						 isShowall[index]=true;
						 this.isShowall=isShowall;
						 return this.trendstexts[index].text;
					 }else{
						 return this.trendstexts[index].text.substr(0,79)+'...'
					 }
				 }
			}
		}
	}
</script>

<style lang="scss">
     page{
		 width: 100%;
		 height: 100%;
	 }
	 .container{
		 width: 100%;
		 height: 100%;
		 background-color: rgba(244, 248, 251, 1);
		 .publish{
			 width: 100%;
			 height:180rpx;
			 display: flex;
			 align-items: center;
			 justify-content: center;
			 .publish-btn{
				 background-color: #29AF73;
				 border-radius: 15rpx;
				 color: #FFFFFF;
				 font-size: 30rpx;
				 display: flex;
				 align-items: center;
				 justify-content: center;
				 width: 300rpx;
				 height: 80rpx;
				 text{
				   margin-left: 10rpx;
				}
			 }
			 background-color: #FFFFFF;
			 border-top: 1rpx solid #F1F1F1;
		 }
		 .ringitem{
			 width: 100%;
			 height: auto;
			 padding-bottom: 20rpx;
			 border-bottom: 1rpx solid #F1F1F1;
			 display: flex;
			 flex-wrap: wrap;
			 justify-content: center;
			 padding-top: 20rpx;
			 .ring-user-del{
				 display: flex;
				 justify-content: space-between;
				 flex-wrap: wrap;
				 align-items: center;
				 width: 680rpx;
			 }
			 .ring-user{
				  height: auto;
				  display: flex;
				  align-items: center;
				  text{margin-left: 20rpx;}
			 }
			 .deltrend{
				 width: 100%;
				 height: 60rpx;
				 display: flex;
				 justify-content: flex-end;
				 margin-top: -30rpx;
			 }
			 .deltrend-qipao{
			    background: url('/static/qipao.png') no-repeat;
				width: 180rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #FFFFFF;
				background-size: 100% 100%;
				margin-right: 10rpx;
			 }
			 .trendstext{
			 	font-size: 28upx;
			 	word-break: break-all;
			 	margin-top: 30upx;
				width: 680rpx;
			 }
			 .showall{color: #2979FF;}
			 .trendsimages{width:680rpx;height:auto;margin-top: 30upx;display: flex;flex-wrap: wrap;justify-content: space-between;}
			 .oneimg image{
			 	width: 280upx;
			 	height: 500upx;
			 }
			 .twoimg image{
			 	width: 335upx;
			 	height: 250upx;
			 }
			 .moreimg image{
			 	width: 220upx;
			 	height: 235upx;
			 }
			 .trendsbtns{
			 	width: 680rpx;
			 	margin-top: 30upx;
			 	display: flex;
			 	align-items: center;
			 }
			 .btnitem{
			 	margin-left: 30upx;
			 	display: flex;
			 	align-items: center;
			 	text{margin-left: 10upx;color: rgba(136, 136, 136, 1);}
			 }
			 .firstbtn{
			 	margin-left: 0upx;
			 }
		 }
		 .lasttrend{
			 border:none !important;
		 }
		 .commitslist-title{
		 	font-size: 30upx;
		 	font-weight: bold;
		 	display: block;
		 	width: 100%;
		 	text-align: center;
		 	line-height: 80upx;
		 }
		 .commitslist{
		    width: 690upx;
		 	margin:auto;
		 	height: auto;
		 	.commititem{
		 		width: 100%;
		 		height: auto;
		 		margin-top: 30upx;
		 	}
		 	.commitinfo{
		 		width: 100%;
		 		height: auto;
		 		display: flex;
		 		flex-wrap: wrap;
		 	}
		 	.commits{
		 		width: 570rpx;
		 		text{
		 			display: block;
		 			word-break: break-all;
		 		}
		 		margin-left: 20rpx;
		 	}
		 	.commit-time{
		 		font-size: 25upx;
		 		color: rgba(136, 136, 136, 1);
		 		margin-top: 15upx;
		 	}
		    .commit-text{
		 		font-size: 28upx;
		 		margin-top: 15upx;
		 		color: rgba(34, 34, 34, 1);
		 	}
		 	.commitdz{
		 		display: flex;
		 		align-items: center;
		    }
		 	.commit-user-dz{
		 		display: flex;
		 		width: 100%;
		 		justify-content: space-between;
		 		font-size: 30upx;
		 		color: rgba(136, 136, 136, 1);
		 	}
		 }
		 .sendcommits{
		 	width: 690upx;
		 	height: auto;
		 	margin: auto;
		 	margin-bottom: 15upx;
		 	display: flex;
		 	textarea{
		 		font-size: 28upx;
		 		padding: 15upx;
		 		background-color: #fff;
		 		width: 580upx;
		 		min-height: 60upx;
		 		max-height: 150upx;
		 	}
		 			 
		 	align-items: center;
		 	.sendbtn{
		 		font-size: 28upx;
		 		color: rgba(136, 136, 136, 1);
		 		margin-left: 20upx;
		 	}
		 }
		 .replys{
		 	display: flex;
		 	flex: 1;
		 	flex-wrap: wrap;
		 	width: 100%;
		 	text{
		 		display: block;
		 		word-break: break-all;
		 	}
		 	margin-top: 10rpx;
		 }
		 .replys-user-dz{
		 	width: 100%;
		 	display: flex;
		 	flex: 1;
		 	justify-content: space-between;
		 	font-size: 30upx;
		 	color: rgba(136, 136, 136, 1);
		 }
		 .replayinfo{
		 	display:flex;
		 	flex: 1;
		 	width: 100%;
		 	margin-left: 10rpx;
		 	flex-wrap: wrap;
		 }
		 .cancelshare{
		 	width: 100%;
		 	height: 80upx;
		 	background-color: #FFFFFF;
		 	display: flex;
		 	align-items: center;
		 	justify-content: center;
		 	font-size: 30upx;
		 }
		 .shareprovides{
		     width: 680upx;
		 	 height: auto;
		 	 padding-top: 120upx;
		 	 padding-bottom: 150upx;
		 	 margin: auto;
		 	 display: flex;
		 	 justify-content: space-between;
		 	 .provideitem{
		 	    width: 120upx;
		 		height: auto;
		 		display: flex;
		 		flex-wrap:wrap;
		 		justify-content: center;
		 		text{
		 			color: rgba(34, 34, 34, 1);
		 			margin-top: 20upx;
		 			font-size: 28upx;
		 		}
		 	}
		 }
		 .provideicon{
		 		width: 120upx;
		 	    height: 120upx;
		 		display: flex;
		 		align-items: center;
		 		justify-content: center;
		 		border-radius: 100%;
		 		background-color: #FFFFFF;
		 		image{
		 			width: 70upx;
		 			height: 70upx;
		 		}
		 }
		 .carditem{
			 border-bottom: 1rpx solid #F1F1F1;
			 padding-bottom: 20rpx;
			 padding-top: 20rpx;
			 width: 100%;
			 height: auto;
			 display: flex;
			 flex-wrap: wrap;
			 justify-content: center;
		 }
		 .cardinfo{
			 width: 710rpx;
			 height: auto;
			 display: flex;
			 image{
				 width: 220rpx;
				 height: 220rpx;
				 border-radius: 10rpx;
			 }
		 }
		 .edidcard{
			 width: 710rpx;
			 height: 60rpx;
			 display: flex;
			 justify-content: flex-end;
			 align-items: center;
			 font-size: 28rpx;
			 color: #878787;
		 }
		 .cardinfo-right{
			 margin-left: 15rpx;
			 display: flex;
			 flex: 1;
			 flex-wrap: wrap;
			 flex-direction: column;
			 justify-content: space-between;
			 
			 .cardinfo-item{
				 font-size: 28rpx;
				 color: #212121;
			 }
		 }
		 .cardinfo-top{
			 display: flex;
			 justify-content: space-between;
			 align-items: center;
			 .deposittag{
				 background-color: #FF9D5D;
				 color: #FFFFFF;
				 font-size: 25rpx;
				 display: flex;
				 align-items: center;
				 justify-content: center;
				 border-radius: 10rpx;
				 padding-left: 15rpx;
				 padding-right: 15rpx;
				 padding-top: 10rpx;
				 padding-bottom: 10rpx;
			 }
		 }
	 }
</style>
